<template>
  <div class="MyKg w">
    <div class="header">
      <div class="title">我的知识图谱</div>
    </div>
    <div class="search">
      <el-input placeholder="请输入知识图谱名称" size="" v-model="search" class="button" @blur="searchKg">
        <el-button slot="append" icon="el-icon-search" @click="searchKg">搜索</el-button>
      </el-input>
    </div>
    <div class="card-list">
      <el-card v-for="kg in kgList" :key="kg.id" class="card">
        <div slot="header" class="clearfix">
          <div>{{ kg.name }}</div>
        </div>
        <div class="content">
          <div class="time">{{ kg.time }}</div>
          <div class="option">
            <el-button type="text" class="button danger" @click="deleteKg(kg.id)">删除</el-button>
            <el-button type="text" class="button" @click="editKg(kg.id)">编辑</el-button>
          </div>
        </div>
      </el-card>
    </div>
    <div class="noMore" v-if="data.length === 0">还没有创建任何知识图谱...</div>
    <div class="more" v-if="kgList.length > displayNum">
      <el-button class="button" round @click="loadMore">加载更多</el-button>
    </div>
  </div>
</template>

<script>
import { getKgsAPI, deleteKgAPI } from "../../../api/kgbuilder/kgbuilder";

export default {
  name: "MyKg",
  data() {
    return {
      data: [],
      displayData: [],
      kgList: [],
      search: "",
      displayNum: 0
    };
  },
  created() {
    getKgsAPI(
      data => {
        this.data = data;
        this.displayData = data;
        this.loadMore();
      },
      error => {
        this.$message.error("获取我的知识图谱列表失败：" + error);
      }
    );
  },
  methods: {
    loadMore() {
      this.displayNum += 8;
      this.kgList = [];
      for (let i = 0; i < this.displayData.length && i < this.displayNum; i++) {
        this.kgList.push(this.displayData[i]);
      }
    },
    searchKg() {
      this.displayNum = 0;
      if (this.search === "") {
        this.displayData = this.data;
      } else {
        let reg = new RegExp(this.search);
        this.displayData = [];
        for (let i=0;i<this.data.length;i++) {
          if (this.data[i].name.match(reg)) {
            this.displayData.push(this.data[i]);
          }
        }
      }
      this.loadMore();
    },
    buildKg(kg) {
      this.search = "";
      this.data.unshift(kg);
      this.displayData = this.data;
      this.displayNum = 0;
      this.loadMore();
    },
    deleteKg(id) {
      deleteKgAPI(
        id,
        () => {
          this.search = "";
          for (let i = 0; i < this.data.length; i++) {
            if (this.data[i].id === id) {
              this.data.splice(i, 1);
              break;
            }
          }
          this.displayData = this.data;
          this.displayNum = 0;
          this.loadMore();
          this.$message.success("删除图谱成功");
        },
        (errorMessage)=>{
          this.$message.error("删除图谱失败:" + errorMessage);
        }
      );
    },
    editKg(id) {
      this.$router.push({
        path: `/kgeditor/${id}`
      });
    }
  }
};
</script>

<style scoped>
.MyKg {
  padding-top: 20px;
  padding-bottom: 30px;
}

.header {
  height: 50px;
}
.header .title {
  box-sizing: border-box;
  float: left;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  border-bottom: rgb(217, 236, 255) solid 5px;
}

.search {
  height: 30px;
  margin-bottom: 30px;
}
.search .button {
  float: right;
  margin-right: 30px;
  width: 300px;
}

.card-list {
  text-align: left;
}
.card-list .card {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 20px;
  text-align: left;
  width: 260px;
}

.card-list .card .content {
  height: 30px;
}
.card-list .card .content .time {
  float: left;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  color: #7f7f7f;
}
.card-list .card .content .button {
  float: right;
  margin-left: 10px;
}
.card-list .card .content .button:hover {
  font-weight: bold;
}
.card-list .card .content .danger {
  color: #f56c6c;
}

.noMore {
  padding-top: 20px;
  color: #c8c8c8;
}

.more .button {
  width: 500px;
}
</style>